{include file="common/head"}
<style>
  .img-avatar {
    width: 100px;
    height: 100px;
    box-shadow: 0 3px 8px lightgray;
  }
</style>
<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">个人信息</div>
        </header>
        <div class="card-body">
          <div class="d-flex">
            <img src="{$userData.head_icon}" alt="{$userData.head_icon}" class="img-avatar rounded-circle me-3">
            <div class="flex-grow-1">
              <button class="btn btn-default" id="uploadHeadIcon">修改头像</button>
              <p class="mt-1 mb-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
            </div>
          </div>
          <hr>
          <form method="post" action="/admin/account/doUpdate" class="site-form">
            <input type="text" class="form-control" name="head_icon" id="head_icon" value="{$userData.head_icon}"
            hidden>
            <div class="mb-3">
              <label for="username">用户名</label>
              <input type="text" class="form-control" name="username" id="username" value="{$userData.username}"
                disabled="disabled">
            </div>
            <div class="mb-3">
              <label for="nickname">昵称</label>
              <input type="text" class="form-control" name="nickname" id="nickname" placeholder="输入您的昵称"
                value="{$userData.nickname}">
            </div>
            <div class="mb-3">
              <label for="email">邮箱</label>
              <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp"
                placeholder="请输入正确的邮箱地址" value="{$userData.email}">
              <small id="emailHelp" class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
            </div>
            <div class="mb-3">
              <label for="signature">简介</label>
              <textarea class="form-control" name="signature" id="signature" rows="3">{$userData.signature}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">保存</button>
          </form>
        </div>
      </div>
    </div>

  </div>
</div>

{include file="common/bottom"}
<script>
  layui.use(function () {
    $ = layui.$
    const layer = layui.layer
    const upload = layui.upload;
    upload.render({
      elem: '#uploadHeadIcon',
      field: 'headIcon',
      url: '/admin/account/uploadHeadIcon', // 此处配置你自己的上传接口即可
      done: function (res) {
        if (res.errno <= 0) {
          $($(this)[0]['item']).parent().prev().prop('src' , res.data.url)
          $('#head_icon').val(res.data.url)
          layer.msg('上传成功，需点击保存才生效哦！')
        }
      }

    });
  })
</script>